<template>
  <el-container>
    <el-aside width="300px">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542375695809&di=124438800a5725e3aafceab37d9c1b4d&imgtype=0&src=http%3A%2F%2Fs7.rr.itc.cn%2Fg%2FE%2FMu%2FU3emiNb.jpg" alt="">
      <div class="personInfo">个人首页</div>
      <!-- <ul class="app-ul">
        <li v-for="item in appList" :key="item.key" @click="selectApp(item.key)">{{item.val}}</li>
      </ul> -->
    </el-aside>
    <el-main>
      <div>
        <div class="header">
          <span class="name">科林</span>
          <span class="social">
            <i class="icon iconfont icon-qq"></i>
            <i class="icon iconfont icon-weixin"></i>
            <i class="icon iconfont icon-iconset0403"></i>
          </span>
        </div>
        <div class="personalInfo">
          <div class="">
            <span><i class="icon iconfont icon-dizhi"></i>北京·中国</span>
            <span><i class="icon iconfont icon-chenggong"></i>活跃的</span>
            <span><i class="icon iconfont icon-mingdanfenpei"></i>男</span>
          </div>
        </div>
        <div class="profession"><i class="icon iconfont icon-mingdanfenpei"></i>演员</div>
      </div>
      <el-tabs type="card" v-model="activeName" @tab-click="tabClickHandler(activeName)">
        <!-- <el-tab-pane label="个人资料" name="personalData">
        </el-tab-pane> -->
        <el-tab-pane label="关联查询" name="correlatedQuery">
          <correlatedQuery :queryData="queryData" ref="correlatedQuery"></correlatedQuery>
        </el-tab-pane>
        <el-tab-pane label="时间线" name="timeLine">
           <timeline :timelineData="timelineData" ref="timeline"></timeline>
        </el-tab-pane>
        <el-tab-pane label="教育履历" name="eduInfo">

        </el-tab-pane>
        <el-tab-pane label="履历信息" name="recordInfo">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
<script>
import correlatedQuery from './correlated-query.vue'
import timeline from './timeline.vue'
export default {
  data () {
    return {
      appList: [
        {
          val: '个人资料',
          key: 'personalData'
        },
        {
          val: '关联查询',
          key: 'correlatedQuery'
        },
        {
          val: '时间线',
          key: 'timeLine'
        },
        {
          val: '教育履历',
          key: 'eduInfo'
        },
        {
          val: '履历信息',
          key: 'recordInfo'
        }
      ],
      queryData: [],
      activeName: 'correlatedQuery',
      timelineData: [
        ['1908-02-11', 1, '爱迪生获得发明电影放映机专利权'],
        ['1936-02-11', 2, '卓别林的《摩登时代》在伦敦上演'],
        ['1937-02-11', 3, '国共两党就合作问题在西安谈判'],
        ['1958-02-11', 1, '《汉语拼音方案》颁布实施'],
        ['1965-02-11', 2, '美国空袭北越'],
        ['1990-02-11', 3, '曼德拉结束27年的铁窗生涯，获释出狱'],
        ['1997-02-11', 1, '“发现”号升空，修复哈勃望远镜'],
        ['2003-02-11', 2, '相声泰斗马三立逝世']
      ]
    }
  },
  components: {
    correlatedQuery,
    timeline
  },
  methods: {
    selectApp (key) {},
    tabClickHandler (data) {
      if (data == 'correlatedQuery') {
        this.queryData = [{
          'name': '杰森斯坦森',
          'children': [{
            'name': 'analytics'
          },
          {
            'name': 'animate',
            'children': [{
              'name': 'Easing',
              'value': 17010
            },
            {
              'name': 'interpolate',
              'children': [{
                'name': 'ArrayInterpolator',
                'value': 1983
              },
              {
                'name': 'ColorInterpolator',
                'value': 2047
              }
              ]
            },
            {
              'name': 'ISchedulable',
              'value': 1041
            },
            {
              'name': 'Tween',
              'value': 6006
            }
            ]
          },
          {
            'name': 'data',
            'children': [{
              'name': 'converters',
              'children': [{
                'name': 'Converters',
                'value': 721
              },
              {
                'name': 'JSONConverter',
                'value': 2220
              }
              ]
            },
            {
              'name': 'DataField',
              'value': 1759
            },
            {
              'name': 'DataUtil',
              'value': 3322
            }
            ]
          },
          {
            'name': 'display',
            'children': [{
              'name': 'DirtySprite',
              'value': 8833
            },

            {
              'name': 'TextSprite',
              'value': 10066
            }
            ]
          },
          {
            'name': 'flex',
            'children': [{
              'name': 'FlareVis',
              'value': 4116
            }]
          },
          {
            'name': 'physics',
            'children': [{
              'name': 'DragForce',
              'value': 1082
            }]
          },
          {
            'name': 'query',
            'children': [{
              'name': 'AggregateExpression',
              'value': 1616
            },
            {
              'name': 'methods',
              'children': [{
                'name': 'add',
                'value': 593
              },
              {
                'name': '-',
                'value': 264
              }
              ]
            },
            {
              'name': 'Minimum',
              'value': 843
            },
            {
              'name': 'Xor',
              'value': 1101
            }
            ]
          },
          {
            'name': 'scale',
            'children': [{
              'name': 'IScaleMap',
              'value': 2105
            },
            {
              'name': 'TimeScale',
              'value': 5833
            }
            ]
          }
          ]
        }]
        this.$nextTick(() => {
          this.$refs.correlatedQuery.initEcharts(this.queryData)
        })
      }
      if (data == 'timeLine') {
        this.$nextTick(() => {
          this.$refs.timeline.initEcharts(this.timelineData)
        })
      }
    }
  }
}
</script>
<style scoped>
.el-container {
  padding: 20px;
}
.el-aside img {
  width: 300px;
}
.personInfo {
  line-height: 50px;
  height: 50px;
  text-align: center;
  color: #ffffff;
  background-color: #5c7cc6;
}
.app-ul li {
  line-height: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
  border-top: 1px solid #eeeeee;
}
.app-ul li:hover {
  font-weight: bold;
}
.el-main{
  padding-top: 0;
}
.header {
  font-size: 20px;
  line-height: 50px;
  width: 100%;
  height: 50px;
  color: #ffffff;
  background-color: #5c7cc6;
}
.header .name {
  margin-left: 20px;
}
.header .social {
  float: right;
  margin-right: 20px;
}
.header .social i {
  font-size: 20px;
  margin-left: 5px;
  cursor: pointer;
}
.personalInfo {
  line-height: 100px;
  height: 100px;
  padding-left: 20px;
  border: 1px solid #eeeeee;
}
.personalInfo span {
  margin-right: 30px;
}
.profession {
  line-height: 50px;
  height: 50px;
  padding-left: 20px;
  border: 1px solid #eeeeee;
  border-top: none;
}
personalInfo i {
  margin-right: 5px;
}

.el-tabs{
  margin-top: 30px;
}
</style>
